<template>

    <div class="login">
       
        <div class="login-center" id="components-form-demo-normal-login">
            <div class="user">用户中心</div>
            <h2>登录</h2>
            <a-form :model="userFrom" name="normal_login"
               ref="formRef"
                class="login-form" 
                :rules="rules" 
                @finish="submitSuccess"
                @validate="handleValidate" 
                @finishFailed="submitErrer">

                <a-form-item label="" name="userAccount" >
                    <a-input v-model:value="userFrom.userAccount" autocomplete="current-password" required placeholder="账号">
                        <template #prefix>
                            <UserOutlined class="site-form-item-icon" />
                        </template>
                    </a-input>
                </a-form-item>

                <a-form-item label="" name="userPassword">
                    <a-input-password v-model:value="userFrom.userPassword" autocomplete="current-password" required placeholder="密码">
                        <template #prefix>
                            <LockOutlined class="site-form-item-icon" />
                        </template>
                    </a-input-password>
                </a-form-item>

                <a-form-item>
                    <a-form-item name="remember" no-style>
                        <a-checkbox v-model:checked="userFrom.remember">记住密码</a-checkbox>
                    </a-form-item>
                    <a class="login-form-forgot" href="#">忘记密码找管理员</a>
                </a-form-item>

                <a-form-item>
                    <a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button">
                        登录
                    </a-button>
                    Ora
                    <a @click="goToRegister">立即注册</a>
                </a-form-item>
            </a-form>



        </div>
    </div>

</template>

<script lang="ts" setup>
 import type { Rule } from 'ant-design-vue/es/form';
import {useUserStore} from '../store/userStore'
const useUserStore1 = useUserStore()
import { useRouter } from "vue-router"
const router = useRouter()
import { ref,reactive, computed } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import {FormState} from '../type/user.ts'
const userFrom = reactive<FormState>({
    userAccount: '',
    userPassword: '',
    remember: true,
});

const rules: Record<string, Rule[]> = {
    userAccount: [ { required: true, pattern:/^[a-zA-Z][a-zA-Z0-9_-]*$/, message: '请输入账号(不含特殊字符)', trigger: 'change' },
    { min: 5, max: 10, message: '长度5-10位', trigger: 'blur' },],
    userPassword: [ { required: true, message: '请输入密码', trigger: 'change' },
    { min: 8, max: 15, message: '8-15位', trigger: 'blur' },],
   
};
import { message } from 'ant-design-vue';
const formRef = ref();
//1.成功登录
const submitSuccess = () => {
    formRef.value
    .validate()
    .then(async () => {
        await useUserStore1.userLogin(userFrom)

        if(useUserStore1.userInfo.code == 1){
            router.replace({
                path:'/Home'
            })
        }
        message.success(useUserStore1.userInfo.data.userAccount+'欢迎登录');
    })
    .catch(() => {
    //   失败的逻辑
    });
}
const submitErrer = () => {
    console.log("登录失败");
}

//校验
const handleValidate = () => {
    // ...args:any
    // console.log("校验"+args);
};
const disabled = computed(() => {
    return !(userFrom.userAccount && userFrom.userPassword);
});

//跳转到注册页面
const goToRegister = () => {
    router.push({
        path: "/Register"
    })
}
</script>

<style scoped lang="scss">
.login {

    background-image: linear-gradient(90deg, #f5cdff, #aa97ff, #31e6e6, #b8ffd1, #24c7c7);
    background-size: 400%;
    animation: name 10s infinite;
    width: 100%;
    height: 100%;

    .user {
        position: absolute;
        top: -20%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 50px;
        font-weight: bolder;
        opacity: 0.8;
        color:#fff;
    }

    .login-center {
        // box-sizing: border-box;
        padding: 40px;
        width: 450px;
        // height: 300px;
        background-color: #ffffff;
        border-radius: 15px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

}

@keyframes name {
    from {
        background-position: 0% 25%;
    }

    50% {
        background-position: 100% 75%;
    }

    to {
        background-position: 0% 25%;
    }
}

#components-form-demo-normal-login .login-form {
    max-width: 100%;
    //   max-height: 300px;
}

#components-form-demo-normal-login .login-form-forgot {
    float: right;
}

#components-form-demo-normal-login .login-form-button {
    width: 100%;
}
</style>